import React from 'react'

/**
 *
 * @author leonzhangxf 20190117
 */
class BasicDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: 'Leon',
      select: 'coconut'
    };

    this.updateName = this.updateName.bind(this);
    this.handleSelectChange = this.handleSelectChange.bind(this);
  }
  updateName(event) {
    this.setState({
      name: event.target.value.toUpperCase()
    });
  }
  handleSelectChange(event) {
    this.setState({
      select: event.target.value
    });
  }
  render() {
    return (
      <div className="BasicDemo">
        <div className="BasicDemo-header">
          {this.state.name}

          <input className="BasicDemo-header-name" type="text" value={this.state.name}
                 onChange={this.updateName}
          />

          <hr/>

          <select value={this.state.select} onChange={this.handleSelectChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>

          <hr/>
        </div>
      </div>
    );
  }
}

export default BasicDemo;